<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link type="text/css" rel="stylesheet" href="../css/index.css">
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- import Vue before Element -->
  <!-- <script src="https://unpkg.com/vue@2/dist/vue.js"></script> -->
  <!-- //引入vue.js -->
  <script src="../resoures/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- 引入axios -->
  <script src="../resoures/axios.min.js"></script>
</head>

<body>
  <div id="app">
    <div class="indexHead">

      <div class="catalogueLogo">
        <img src="../img/logo.png" height="70px">

      </div>
      <div class="title">
        网上书城
      </div>
      <div class="indexHeadText">
        <a href="/html/index.html" class="indexHeadTextA">首页</a>
        <p class="indexHeadFenge">丨</p>
        <a href="/" class="indexHeadTextA">图书分类 </a>
        <p class="indexHeadFenge">丨</p>
        <a href="/" class="indexHeadTextA">免费注册</a>
        <p class="indexHeadFenge">丨</p>
        <a href="/" class="indexHeadTextA">请先登录</a>
        <p class="indexHeadFenge">丨</p>
        <a href="/" class="indexHeadTextA">我的订单</a>
        <p class="indexHeadFenge">丨</p>
        <a href="/" class="indexHeadTextA">退出</a>
      </div>
    </div>

  
    <!-- 轮播图 -->
    <div id="Lunbotu">
      <template>
        <el-carousel indicator-position="outside" height="500px">
          <el-carousel-item v-for="item in imgList" :key="item">
            <img :src="item" class="LunbotuImage">
          </el-carousel-item>
        </el-carousel>
      </template>
    </div>
     <!-- 新鲜好书+低价专区 -->
    <div class="recommendation">
    <div class="recommendation1">
      <div class="recommendation1Title">
        <p style="color: black; font-size: 30px; display: inline;">新鲜好书</p>
        <p style="color: rgb(59, 58, 58); font-size: 15px; display: inline; margin-left: 20px;">书单推荐 品质靠谱</p>
      </div>
      <div class="recommendation1Content">
        <a href="/" class="recommendation1ContentchirldA" >
          <div class="recommendation1Contentchirld">
            <div class="recommendationimage">
              
              <img :src="contentList[0].imageName" alt="" width="80%" height="80%">
              
            </div>
            <div class="recommendationText">
              <div class="recommendationText1" >{{contentList[0].name}}</div>
              <div class="recommendationText2">
                {{contentList[0].author}}&nbsp;&nbsp;&nbsp;&nbsp;{{contentList[0].publisher}}
              </div>
              <div class="recommendationText3">￥{{contentList[0].price}}</div>
            </div>
          </div>
        </a>
        <a href="/" class="recommendation1ContentchirldA" >
          <div class="recommendation1Contentchirld">
            <div class="recommendationimage">

              <img :src="contentList[1].imageName" alt="" width="80%" height="80%">

            </div>
            <div class="recommendationText">
              <div class="recommendationText1" >{{contentList[1].name}}</div>
              <div class="recommendationText2">
                {{contentList[1].author}}&nbsp;&nbsp;&nbsp;&nbsp;{{contentList[1].publisher}}
              </div>
              <div class="recommendationText3">￥{{contentList[1].price}}</div>
            </div>
          </div>
        </a>
        <a href="/" class="recommendation1ContentchirldA" >
          <div class="recommendation1Contentchirld">
            <div class="recommendationimage">

              <img :src="contentList[2].imageName" alt="" width="80%" height="80%">

            </div>
            <div class="recommendationText">
              <div class="recommendationText1" >{{contentList[2].name}}</div>
              <div class="recommendationText2">
                {{contentList[2].author}}&nbsp;&nbsp;&nbsp;&nbsp;{{contentList[2].publisher}}
              </div>
              <div class="recommendationText3">￥{{contentList[2].price}}</div>
            </div>
          </div>
        </a>
        <a href="/" class="recommendation1ContentchirldA" >
          <div class="recommendation1Contentchirld">
            <div class="recommendationimage">

              <img :src="contentList[3].imageName" alt="" width="80%" height="80%">

            </div>
            <div class="recommendationText">
              <div class="recommendationText1" >{{contentList[3].name}}</div>
              <div class="recommendationText2">
                {{contentList[3].author}}&nbsp;&nbsp;&nbsp;&nbsp;{{contentList[3].publisher}}
              </div>
              <div class="recommendationText3">￥{{contentList[3].price}}</div>
            </div>
          </div>
        </a>
        <a href="/" class="recommendation1ContentchirldA" >
          <div class="recommendation1Contentchirld">
            <div class="recommendationimage">

              <img :src="contentList[4].imageName" alt="" width="80%" height="80%">

            </div>
            <div class="recommendationText">
              <div class="recommendationText1" >{{contentList[4].name}}</div>
              <div class="recommendationText2">
                {{contentList[4].author}}&nbsp;&nbsp;&nbsp;&nbsp;{{contentList[4].publisher}}
              </div>
              <div class="recommendationText3">￥{{contentList[4].price}}</div>
            </div>
          </div>
        </a>



      </div>
    </div>
    <div class="recommendation1" style="margin-top: 50px">
        <div class="recommendation1Title">
          <p style="color: black; font-size: 30px; display: inline;">新鲜好书</p>
          <p style="color: rgb(59, 58, 58); font-size: 15px; display: inline; margin-left: 20px;">书单推荐 品质靠谱</p>
        </div>
        <div class="recommendation1Content">
          <a href="/" class="recommendation1ContentchirldA" >
            <div class="recommendation1Contentchirld">
              <div class="recommendationimage">

                <img :src="contentList[9].imageName" alt="" width="80%" height="80%">

              </div>
              <div class="recommendationText">
                <div class="recommendationText1" >{{contentList[9].name}}</div>
                <div class="recommendationText2">
                  {{contentList[9].author}}&nbsp;&nbsp;&nbsp;&nbsp;{{contentList[9].publisher}}
                </div>
                <div class="recommendationText3">￥{{contentList[9].price}}</div>
              </div>
            </div>
          </a>
          <a href="/" class="recommendation1ContentchirldA" >
            <div class="recommendation1Contentchirld">
              <div class="recommendationimage">

                <img :src="contentList[5].imageName" alt="" width="80%" height="80%">

              </div>
              <div class="recommendationText">
                <div class="recommendationText1" >{{contentList[5].name}}</div>
                <div class="recommendationText2">
                  {{contentList[5].author}}&nbsp;&nbsp;&nbsp;&nbsp;{{contentList[5].publisher}}
                </div>
                <div class="recommendationText3">￥{{contentList[5].price}}</div>
              </div>
            </div>
          </a>
          <a href="/" class="recommendation1ContentchirldA" >
            <div class="recommendation1Contentchirld">
              <div class="recommendationimage">

                <img :src="contentList[6].imageName" alt="" width="80%" height="80%">

              </div>
              <div class="recommendationText">
                <div class="recommendationText1" >{{contentList[6].name}}</div>
                <div class="recommendationText2">
                  {{contentList[6].author}}&nbsp;&nbsp;&nbsp;&nbsp;{{contentList[6].publisher}}
                </div>
                <div class="recommendationText3">￥{{contentList[6].price}}</div>
              </div>
            </div>
          </a>
          <a href="/" class="recommendation1ContentchirldA" >
            <div class="recommendation1Contentchirld">
              <div class="recommendationimage">

                <img :src="contentList[7].imageName" alt="" width="80%" height="80%">

              </div>
              <div class="recommendationText">
                <div class="recommendationText1" >{{contentList[7].name}}</div>
                <div class="recommendationText2">
                  {{contentList[7].author}}&nbsp;&nbsp;&nbsp;&nbsp;{{contentList[7].publisher}}
                </div>
                <div class="recommendationText3">￥{{contentList[7].price}}</div>
              </div>
            </div>
          </a>
          <a href="/" class="recommendation1ContentchirldA" >
            <div class="recommendation1Contentchirld">
              <div class="recommendationimage">

                <img :src="contentList[8].imageName" alt="" width="80%" height="80%">

              </div>
              <div class="recommendationText">
                <div class="recommendationText1" >{{contentList[8].name}}</div>
                <div class="recommendationText2">
                  {{contentList[8].author}}&nbsp;&nbsp;&nbsp;&nbsp;{{contentList[8].publisher}}
                </div>
                <div class="recommendationText3">￥{{contentList[8].price}}</div>
              </div>
            </div>
          </a>



        </div>
      </div>




    </div>

  </div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    data() {
      return {
        imgList: ["../img/desktop_1.jpg", "../img/desktop_2.jpg", "../img/desktop_3.jpg", "../img/desktop_4.jpg"],
        contentList: [],
        msg: 100
      }
    },
    mounted() {
      let _this = this;
      axios.post("http://localhost:8081/indexpage").then(function (resp) {
        _this.contentList = resp.data
        console.log(_this.contentList[1].imageName)
      })
    },

  })
</script>

</html>